<template>
	<view class="refound">
		<view style="margin-top: 260upx;display: inline-block;width: 100%;" class="loginInput">
			<image class="img-left" src="../../static/img/ic_account_left_b.png" mode=""></image>
			<image @click="clearTel" v-if="this.info.telNo.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
			<input v-input-fb placeholder-class="color-gray" @keydown.native="keydown($event)" placeholder="请输入手机号码" :maxlength="13" class="uni-input size-14" type="text" v-model="info.telNo" />
		</view>
		<view class="flex-between margint-20">
			<view class="loginInput widthb-50 height-80">
				<image class="img-left" src="../../static/img/yzm.png" mode=""></image>
				<input v-input-fb placeholder-class="color-gray" placeholder="请输入验证码" :maxlength="6" class="uni-input size-14" type="number" v-model="info.verificationCode" />
			</view>
			<button  :disabled="showData" @click="showVerify" class="height-80 size-14 padding-0 width-200 marginr-50" style="background-color: #1f9dd8;color: #fff!important;">
				<template v-if="sending">
					获取验证码
				</template>
				<template v-else>
					{{second}}s
				</template>
			</button>
			<Verify
				@success='getcodeFun'
				:mode="'pop'"
				:captchaType="'clickWord'"
				:captchaId ="'btn'"
				ref="verify"
				:imgSize="{width:'310px',height:'155px'}"
			></Verify>
		</view>
		<view class="loginInput margint-20">
			<image class="img-left" src="../../static/img/ic_password_left_b.png" mode=""></image>
			<image @click="clearPwd" v-if="this.info.loginPwd.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
			<image @click="showPwd = !showPwd;" v-if="!showPwd" class="img-right" src="../../static/img/ic_eye_close.png" mode=""></image>
			<image @click="showPwd = !showPwd;" v-else class="img-right" src="../../static/img/ic_eye_open.png" mode=""></image>
			<input v-input-fb placeholder-class="color-gray" v-if="!showPwd"  placeholder="请设置6-12位密码（字母＋数字）" class="uni-input size-14" type="password" v-model="info.loginPwd" />
			<input v-input-fb placeholder-class="color-gray" v-else placeholder="请设置6-12位密码（字母＋数字）" class="uni-input size-14" type="text" v-model="info.loginPwd" />
		</view>
		<view class="loginInput margint-20">
			<image class="img-left" src="../../static/img/ic_password_left_b.png" mode=""></image>
			<image @click="clearPwd1" v-if="this.info.loginPwd1.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
			<image @click="showPwd1 = !showPwd1;" v-if="!showPwd1" class="img-right" src="../../static/img/ic_eye_close.png" mode=""></image>
			<image @click="showPwd1 = !showPwd1;" v-else class="img-right" src="../../static/img/ic_eye_open.png" mode=""></image>
			<input v-input-fb placeholder-class="color-gray" v-if="!showPwd1"  placeholder="请设置6-12位密码（字母＋数字）" class="uni-input size-14" type="password" v-model="info.loginPwd1" />
			<input v-input-fb placeholder-class="color-gray" v-else placeholder="请设置6-12位密码（字母＋数字）" class="uni-input size-14" type="text" v-model="info.loginPwd1" />
		</view>
		<view class="base-color padding24-50">
			<button class="confirm" v-bind:class="{'valid-btn':loginisValid}" @click="loginconfirm" type="primary">确认并提交</button>
		</view>		
	</view>
</template>

<script>
	import unicore from '@/core/core.service.ts'
	import graceChecker from "@/common/graceChecker.js"
	import Verify from "@/components/verify/verify.vue"
	export default {
		data() {
			return {
				info:{
					telNo:"",
					loginPwd:"",
					loginPwd1:""
				},
				showPwd:false,
				second:60,
				showData: false,
				showCode: false ,// 显示验证码模块,
				sending:true,
				showPwd1:false
			}
		},
		methods: {
			getcodeFun ({captchaVerification}) {
				console.log(captchaVerification)
				const telNo = this.info.telNo.replace(/\ /g,"");
				this.$store.dispatch('getRestLoginPwdCodePub',{
					telNo: telNo,
					flag:'2',
					realSend: true,
					captchaVerification,
					captchaType:'clickWord'
				}).then(res => {
					if (res.reqResult.code == 1) {
						// this.info.verificationCode = res.reqResult.temp;
						uni.showToast({
							icon: "none",
							title: "验证码发送成功"
						})
					}
				})
				this.sending = false
				this.showData = true
				this.getyzCode()
				
			},
			showVerify(){
				const telNo = this.info.telNo.replace(/\ /g,"");
				if(this.$core.regexp.isMobile(telNo))
				{
					this.$refs.verify.show();
				} else {
					uni.showToast({
						title:"手机号格式不正确，请确认！",
						icon:"none"
					})
				}
				
			},
			getyzCode(){
				let result = setInterval(()=>{
					-- this.second;
					if (this.second < 0) {
						clearInterval(result)
						this.sending = true
						this.showData = false
						this.second = 60
					}
				},1000)
			},
			loginconfirm(){
				const telNo = this.info.telNo.replace(/\ /g,"");
					
					if (this.loginisValid) {
						let src = 'restLogin'
						let parms = { // 注册
							telNo: telNo,
							verificationCode: this.info.verificationCode,
							loginPwd:this.info.loginPwd,
						}
						console.log(parms, 'parms')
						this.$store.dispatch(src, parms).then(res => {
							if(res.reqResult.code == 1){
								uni.showToast({
									duration:2000,
									title:'重置密码成功'
								})
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title:graceChecker.error
						})
					}
				
			},
			clearPwd(){
				this.info.loginPwd = "";
			},
			clearPwd1(){
				this.info.loginPwd1 = "";
			},
			keydown(e){
				e = e || window.event
				let keyCode = e.keyCode || e.which || e.charCode
				setTimeout(()=>{ // uni-app input有延迟
					let telNo = this.info.telNo
					telNo=telNo.replace(/[^0-9,\s]+/g,'')
					if(e.keyCode === 8) {
						return
					}else if(telNo.length === 3 || telNo.length === 8) {
						telNo += " "
					}
					this.info.telNo = telNo
				},0)
			},
			clearTel(){
				this.info.telNo=""
			}
		},
		computed:{
			loginisValid(){
				const telNo = this.info.telNo.replace(/\ /g,"");
				const loginInfo = {
					telNo,
					loginPwd:this.info.loginPwd,
					loginPwd1:this.info.loginPwd1,
					verificationCode:this.info.verificationCode,
				}
				let rule = [
					{name: 'telNo', checkType: 'boolean',checkRule:this.$core.regexp.isMobile(telNo), errorMsg: '手机号码格式不正确'},
					{name: 'loginPwd', checkType: 'boolean',checkRule:this.$core.regexp.isPassword(this.info.loginPwd), errorMsg: '请输入6-12位英文+数字混合密码'},
					{name: 'loginPwd1', checkType: 'boolean',checkRule:this.info.loginPwd == this.info.loginPwd1, errorMsg: '两次密码输入不一致'},
					{name: 'verificationCode', checkType: 'notnull', errorMsg: '验证码不能为空'},
				]
				let checkRes = graceChecker.check(loginInfo, rule)
				return checkRes;
			}
		},
		components:{
			Verify
		}
	}
</script>

<style lang="scss" scoped>
	.refound{
		min-height: 100%;
		background: url(../../static/img/resetbg.png);
		background-size: 100% 100%;
	}
	.loginInput{border-radius: 10upx;background: #fff;}
	.loginInput .uni-input{height: 80upx;line-height: 80upx;color: #333;}
	.img-title{
		width: 120upx;
		height: 120upx;
		margin: 200upx 0 20upx;
	}
	.img-left{
		float: left;
		width: 44upx;
		height: 44upx;
		margin-top: 18upx;
		margin-left: 8upx;
		margin-right: 8upx;
	}
	.img-right{
		float: right;
		width: 32upx;
		height: 32upx;
		margin-top: 24upx;
		margin-left: 10upx;
		margin-right: 16upx;
	}
	.valid-btn{
		background-color: #1f9dd8!important;
	}
	.confirm{
		background-color: #888888;
	}
</style>
